import React, {PureComponent} from "react"
import {LockOutlined, UserOutlined} from '@ant-design/icons'
import {Alert, Button, Checkbox, Input, Form} from "antd"
import formCompose from "./compose"
import {withRouter} from "react-router"


export default @withRouter
@formCompose
class PasswordLoginForm extends PureComponent {

	formRef = React.createRef()

	render() {

		const {_serverMessage, _submitting, _initData, onInputChange, onSubmit, onEnterKey, onForgetPassword} = this.props

		return (
			<div className={'ld2-login-form'}>
				{
					!_serverMessage
						? undefined
						: <Alert message={_serverMessage} type="error" showIcon className={'ld2-login-message'}/>
				}
				<Form className="login-form" ref={this.formRef} initialValues={_initData}>
					<Form.Item name={'userName'}
					           rules={[{required: true, message: '请输入用户名或注册手机号'}]}>
						<Input size={'large'}
						       onChange={onInputChange}
						       prefix={<UserOutlined style={{color: 'rgba(0,0,0,.25)'}}/>}
						       onPressEnter={() => onEnterKey(this.formRef.current)}
						       placeholder="请输入用户名/注册手机号"/>
					</Form.Item>
					<Form.Item name={'password'}
					           rules={[{required: true, message: '请输入用户密码'}]}>
						<Input.Password size={'large'}
						                prefix={<LockOutlined style={{color: 'rgba(0,0,0,.25)'}}/>}
						                type="password"
						                onPressEnter={() => onEnterKey(this.formRef.current)}
						                placeholder="请输入用户密码"/>
					</Form.Item>
					<Form.Item style={{marginBottom: '0px'}}
					           valuePropName={'checked'}
					           name={'remember'}>
						<Checkbox>记住帐号</Checkbox>
						<a className="login-form-forgot" onClick={onForgetPassword}>忘记密码</a>
					</Form.Item>
				</Form>
				<div>
					<Button size={'large'}
					        style={{width: '280px'}}
					        loading={_submitting}
					        type="primary"
					        htmlType="submit"
					        onClick={() => onSubmit(this.formRef.current)}
					        className="login-form-button">
						登录
					</Button>
				</div>
			</div>
		);
	}
}